<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-13 10:45:04
 * @LastEditTime: 2023-12-05 14:47:22
-->
<template>
    <div class="add1">
        <div class="top">
            <!--下拉切换-->
            <div class="main" style="justify-content: space-between;flex-direction: inherit;width: 740px;">
                <CommonSelectRouter :dataList="addContractRouter.data" :default="addContractRouter.default" ref="child1"
                    @returnData="getRouter" isLock>
                </CommonSelectRouter>
                <el-button type="primary" @click="handleClick" style="width: 85px;height: 30px;" :loading="loading">{{
                    $t("text.House.l144") }}</el-button>
            </div>
        </div>
        <div class="main">
            <div v-for="(s, index1) in addContractPage" v-bind:key="s.headTitle" style="width: 100%;">
                <div class="headTitle">{{ s.headTitle }}</div>
                <div class="df">
                    <div v-for="(item, index2) in s.data" v-bind:key="item.title"
                        :style="item.type == 'radio' || item.type == 'searchDialog' ? { paddingRight: '15px', width: '100%' } : { paddingRight: '15px' }">

                        <div class="title"><span class="must" v-if="item.isMust && item.type != 'loopInput'">※</span>{{
                            item.title }}</div>

                        <div style="width: 100%;" v-if="item.type == 'searchDialog'">
                            <DialogLayout60 :isNewHouse="item.isNewHouse" :isCustomer="item.isCustomer"
                                @returnData="setData"></DialogLayout60>
                        </div>

                        <CommonInputLoopKey v-if="item.type == 'loopInput'" :buttonName="item.default"
                            :ref="'child' + index1 + index2" :mustHit="item.mustHit" @returnData="setData"
                            :select1="dictionaryTree[item.dictionaryKey.split(',')[0]]" :fromType="item.selectType"
                            :select2="dictionaryTree[item.dictionaryKey.split(',')[1]]">
                        </CommonInputLoopKey>

                        <CommonInputKey v-if="item.type == 'input'" :leftText="item.defaultUnit" :disabled="item.disabled"
                            :isMust="item.isMust" :mustHit="item.mustHit" :insertKey="item.insertKey" @returnData="setData"
                            :ref="'child' + index1 + index2" :isNumber="item.isNumber"
                            :default="item.insertKey == 'sellUserId' ? sellUserName : item.insertKey == 'buyUserId' ? buyUserName : postParams[item.insertKey]">
                        </CommonInputKey>

                        <CommonInputSearchSelect v-if="item.type == 'search'" :isMust="item.isMust" :mustHit="item.mustHit"
                            :insertKey="item.insertKey" @returnData="setData" :ref="'child' + index1 + index2"
                            :getData="getUserData" :dataList="userDataList">
                        </CommonInputSearchSelect>

                        <CommonSelectKey v-if="item.type == 'select'" :isMust="item.isMust" :mustHit="item.mustHit"
                            :insertKey="item.insertKey" @returnData="setData" :dataList="dictionaryTree[item.dictionaryKey]"
                            :ref="'child' + index1 + index2" :default="''">
                        </CommonSelectKey>

                        <CommonInputAndUnitSelect v-if="item.type == 'inputAndSelect'" :leftText="item.defaultUnit"
                            :isMust="item.isMust" :mustHit="item.mustHit" :insertKey="item.insertKey"
                            :dataList="dictionaryTree[item.dictionaryKey]" @returnData="setData" :isNumber="1"
                            :ref="'child' + index1 + index2" :key1="'dictName'" :key2="'dictValue'" isDict
                            :default="dictionaryTree[item.dictionaryKey]?.[0].dictName"
                            :defaultValue="dictionaryTree[item.dictionaryKey]?.[0].dictValue">
                        </CommonInputAndUnitSelect>

                        <CommonUploadFile v-if="item.type == 'uploadFile'" @returnData="setData"></CommonUploadFile>

                        <CommonInputTime v-if="item.type == 'time'" :leftText="item.defaultUnit"
                            :ref="'child' + index1 + index2" :isMust="item.isMust" :mustHit="item.mustHit"
                            :insertKey="item.insertKey" @returnData="setData" :default="''">
                        </CommonInputTime>

                        <CommonTextarea v-if="item.type == 'textarea'" :defaults="item.default" :insertKey="item.insertKey"
                            @returnData="setData" class="main" :value="''" :maxlength="200">
                        </CommonTextarea>

                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
    
<script>

import CommonSelectRouter from '@/components/input/CommonSelectRouter.vue';
import { addContractPage1, addContractPage2, addContractPage3 } from '../../itemList';
import DialogLayout60 from '@/components/dialogLayout/DialogLayout60.vue';
import CommonInputLoopKey from '@/components/input/CommonInputLoopKey.vue';
import CommonInputKey from '@/components/input/CommonInputKey.vue';
import CommonSelectKey from '@/components/input/CommonSelectKey.vue';
import CommonInputTime from '@/components/input/CommonInputTime.vue';
import CommonUploadFile from '@/components/input/CommonUploadFile.vue';
import CommonTextarea from '@/components/input/CommonTextarea.vue';
import { ElMessage } from 'element-plus'
import { getContractDropdownData, contractInsert, getUserLikeRealName } from '../../http/api'
import CommonInputSearchSelect from '@/components/input/CommonInputSearchSelect.vue';
import CommonInputAndUnitSelect from '@/components/input/CommonInputAndUnitSelect.vue';
export default {
    name: "AddContract",
    components: {
        CommonSelectRouter,
        DialogLayout60,
        CommonInputLoopKey,
        CommonInputKey,
        CommonSelectKey,
        CommonInputTime,
        CommonUploadFile,
        CommonTextarea,
        CommonInputSearchSelect,
        CommonInputAndUnitSelect
    },
    data() {
        return {
            addContractRouter: {
                default: this.$t("text.Contract.l289"),
                data: [
                    { id: 1, name: this.$t("text.Contract.l289") },
                    { id: 2, name: this.$t("text.Contract.l290") },
                    { id: 3, name: this.$t("text.Contract.l291") },
                ]
            },
            addContractPage: addContractPage1,
            sellUserName: '',
            buyUserName: '',
            postParams: { contractType: 0 },
            dictionaryTree: {},
            userDataList: [],
            loading:false
        }
    },
    mounted() {

        if (this.$route.query.index != undefined) {
            this.getRouter(Number(this.$route.query.index))
            this.addContractRouter.default = this.addContractRouter.data.find(v => v.id === Number(this.$route.query.index))?.name || '';
        }

        getContractDropdownData().then(res => {
            if (res !== undefined) {
                this.dictionaryTree = res
                console.log(res)
            }
        })
    },
    methods: {
        //切换
        getRouter(index) {
            switch (index) {
                case 1: this.addContractPage = addContractPage1; this.postParams.contractType = 0; break;
                case 2: this.addContractPage = addContractPage2; this.postParams.contractType = 1; break;
                case 3: this.addContractPage = addContractPage3; this.postParams.contractType = 2; break;
            }
        },
        handleClick() {

            let flag = true
            this.addContractPage.forEach((element, index1) => {
                element.data.forEach((item, index2) => {
                    const childRef = this.$refs['child' + index1 + index2]
                    if (childRef && childRef.length > 0 && !childRef[0].inputReturn()) {
                        flag = flag && false
                    }
                });
            });
            if (flag) {
                this.insert()
            } else {
                ElMessage.error({
                    showClose: true,
                    message: this.$t('text.Common.l999'),
                    type: 'error',
                })
            }
        },

        insert() {
            this.loading=true
            let userList = { userList: [...this.postParams.userList0 ?? [], ...this.postParams.userList1 ?? []] }
            this.postParams.userList = userList.userList
            contractInsert(this.postParams).then(res => {
                this.loading=false
                if (res !== undefined) {
                    ElMessage.success({
                        showClose: true,
                        message: this.$t('text.Common.l1'),
                        type: 'success',
                    })
                    this.$router.back()
                }
            })
        },

        getUserData(inputValue) {
            getUserLikeRealName({ realName: inputValue }).then((res) => {
                if (res !== undefined) {
                    this.userDataList = res
                }
            }).catch()
        },

        setData(obj) {
            console.log(obj)
            if (Object.keys(obj).includes('sellUserId') && Object.keys(obj).length === 1 ||
                Object.keys(obj).includes('buyUserId') && Object.keys(obj).length === 1) {
                return
            }

            if (Object.keys(obj).includes('sellUserId')) {
                this.sellUserName = obj.realName
            }
            if (Object.keys(obj).includes('buyUserId')) {
                this.buyUserName = obj.realName
            }
            this.postParams = { ...this.postParams, ...obj }
            console.log(this.postParams)
        }
    },
    watch: {

    },
    computed: {
    },
}
</script>
    
<style scoped>
.main>div {
    width: 100%;
}

.add2 {
    width: 100%;
}

.add1 {
    width: 100%;
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 700px;
    margin: 0 auto;
}

.headTitle {
    font-size: 14px;
    color: #aaa;
    text-align: left;
    padding-top: 20px
}

.df {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid rgb(220, 223, 230);
    padding-bottom: 25px;
    width: inherit;
}

.must {
    font-size: 12px;
    color: red;
    padding-right: 5px;
}

.title {
    font-size: 12px;
    color: black;
    text-align: left;
    display: flex;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 5px;
    font-weight: 600;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid rgb(220, 223, 230);
    padding-top: 7px;
    padding-bottom: 7px;
    position: sticky;
    top: 29px;
    background: white;
    z-index: 53;
    box-shadow: 1px 1px 10px 5px #f8f8f8
}
</style>